<template>
  <div>
    <el-select v-model="currentName" placeholder="请选择" @change="handleSelect" v-if="hasResourcelinks">
      <el-option v-for="(item, index) in resourcelinks" :value="item.code" :label="item.name" :key="index"></el-option>
    </el-select>
    <el-select v-model="currentName" placeholder="请选择" @change="handleSelect" v-else>
      <el-option label="无" value="no-link"></el-option>
      <el-option v-for="(item, index) in links" :value="item.code" :label="item.name" :key="index"></el-option>
    </el-select>
    <component v-if="showDialog !== 'home' && showDialog !== 'no-link'" :is="showDialog" :productDialogVisible="isOpen" @save="getSelectData" @close="reset"/>
  </div>
</template>

<script>
import seriesDialog from '_c/Dialog/series_dialog';
import productDialog from '_c/Dialog/product_dialog';
import customizeDialog from '_c/Dialog/customize_dialog';
import customThemeDialog from '_c/Dialog/custom_theme_dialog';
import customUrlDialog from '_c/Dialog/custom_url_dialog';
import {mapGetters} from 'vuex';
import formMixin from 'vue-ele-form/lib/mixins/formMixin';

export default {
    name: 'ele-form-custom-select',
    components: {
        'series_detail_page': seriesDialog,
        'product_detail_page': productDialog,
        'system_auto': customizeDialog,
        'theme_auto': customThemeDialog,
        'url_auto': customUrlDialog
    },
    mixins: [formMixin], // 必须引入mixin
    props: {
    // value 是传递过来的值
        value: [Object, String],
        resourcelinks: {
            type: Array,
            default () {
                return [];
            }
        },
        // desc是此组件的描述, 结构为
        // { style: {}, class: {}, on: {}, attrs: {} }
        desc: {
            type: Object,
            default () {
                return {};
            }
        }
    },
    watch: {
        value (newVal, oldVal) {
            this.currentName = newVal ? (newVal.type !== 'home' ? this.textMap[newVal.type] + ':' + newVal.title : this.textMap[newVal.type]) : 'no-link';
        },
        resourcelinks: {
            deep: true,
            immediate: true,
            handler: function (newValue) {
                if (newValue.length) {
                    this.hasResourcelinks = true;
                    this.reset();
                }
            }
        }
    },
    computed: {
        ...mapGetters(['links'])
    },
    mounted () {
        this.reset();
    },
    data () {
        return {
            textMap: {
                'home': '首页',
                'series_detail_page': '系列详情',
                'product_detail_page': '商品详情',
                'system_auto': '系统自定义页面',
                'theme_auto': '主题自定义页面',
                'url_auto': '自定义url'
            },
            showDialog: '',
            isOpen: true,
            currentName: '',
            hasResourcelinks: false
        };
    },
    methods: {
        handleSelect () {
            this.isOpen = ['series_detail_page', 'product_detail_page', 'theme_auto', 'url_auto', 'system_auto'].includes(this.currentName);
            this.showDialog = this.currentName;
            if (this.currentName === 'home') {
                this.$emit('input', {
                    type: 'home',
                    title: '首页',
                    url: '/'
                });
            } else if (this.currentName === 'no-link') {
                this.$emit('input', null);
            }
        },
        getSelectData (data) {
            // data.spuName
            // data.name
            // data.title
            // data.url
            this.isOpen = false;
            const map = {
                'series_detail_page': '/collection',
                'product_detail_page': '/products',
                'system_auto': '/system-auto-page',
                'theme_auto': '/custom-page'
            };
            if (data) {
                this.$emit('input', {
                    title: this.currentName === 'product_detail_page' ? data.spuName : (this.currentName === 'series_detail_page' || this.currentName === 'theme_auto') ? data.name : this.currentName === 'system_auto' ? data.title : data.url,
                    id: data.id,
                    url: this.currentName === 'url_auto' ? data.url : map[this.currentName] + '/' + data.id,
                    type: this.currentName
                });
                this.$emit('rowData', data);
            }
        },
        reset (event) {
            this.isOpen = false;
            if (this.resourcelinks.length !== 0 && this.value) {
                let val;
                if (typeof this.value === 'string') {
                    val = JSON.parse(this.value);
                } else {
                    val = this.value;
                }

                this.currentName = val ? this.textMap[val.type] + ':' + val.title : '';
            } else {
                this.currentName = this.value ? (this.value.type !== 'home' ? this.textMap[this.value.type] + ':' + this.value.title : this.textMap[this.value.type]) : 'no-link';
            }
        }
    }
};
</script>

<style scoped>

</style>
